<template>
  <div class="film-details" v-if="fdlist">
    <Heads v-fdtitle="20" types="fm_details" :fdname="fdlist.name"></Heads>

    <div class="poster">
      <van-image height="100%" :src="fdlist.poster" />
      <van-icon class="back-icon" name="arrow-left" @click="iconbackClicked" />
    </div>

    <div class="film-detail">
      <div class="col">
        <div class="film-name">
          <span class="name">{{fdlist.name}}</span>
          <van-tag v-if="fdlist.item">{{fdlist.item.name}}</van-tag>
        </div>
        <div class="film-grade">
          <span class="grade">7.2</span>
          <span class="grade-text">分</span>
        </div>
      </div>
      <div class="film-category grey-text">{{fdlist.category}}</div>
      <div class="film-premiere-time grey-text">{{soondate}}上映</div>
      <div class="film-nation-runtime grey-text">{{fdlist.nation}} | {{fdlist.runtime}}分钟</div>
      <div
        class="film-synopsis grey-text hidde"
        :style="hidde"
      >{{fdlist.synopsis}}</div>
      <div class="toggle">
        <van-icon :name="tips" @click="developClicked"/>
      </div>
    </div>

    <div class="actors">
      <div class="actors-title-bar">
        <span class="actors-title-text">演职人员</span>
      </div>
      <div class="actors-swipe">
        <Film-swipe swipeid="actors-swipe"
        :swipedata="{ slidesPerView: 3, spaceBetween: 20,freeMode: true}">
          <div class="swiper-slide" v-for="item in fdlist.actors" :key="item.avatarAddress">
            <van-image
              width="2.3rem"
              height="2.5rem"
              :src="item.avatarAddress"
            />
            <span class="actors-name van-ellipsis"
            :style="{display: 'block',
            'padding-top': '.10rem',
            'font-size': '.22rem',
            color: '#191a1b'}">{{item.name}}</span>
            <span class="actors-role van-ellipsis"
            :style="{display: 'block',
            'font-size': '.22rem',
            color: '#797d82'}">{{item.role}}</span>
          </div>
        </Film-swipe>
      </div>
    </div>
    <div class="photos">
      <div class="photos-title-bar">
        <span class="photos-title-text">剧照</span>
        <span class="photos-to-all"
        @click="filmImgPreviewClicked(0)"
        >全部({{fdlist.photos.length}})<van-icon name="arrow" />
        </span>
      </div>
      <div class="photos-swipe" :style="{padding: '0 .15rem'}">
        <Film-swipe swipeid="photos-swipe"
        :swipedata="{ slidesPerView: 2, spaceBetween: 10,freeMode: true}">
          <div class="swiper-slide" v-for="(item, index) in fdlist.photos"
          :key="item.avatarAddress" @click="filmImgPreviewClicked(index)">
            <van-image
              width="3.3rem"
              height="2.4rem"
              :src="item"
            />
          </div>
        </Film-swipe>
      </div>
    </div>

    <van-dialog v-model="showDialog" title="该影片尚未排期,是否回首页"
    show-cancel-button confirmButtonColor="#ff5f16" confirmButtonText="同意"
    @confirm="confirmDialog">
      <van-image :src="fdlist.poster" width="4rem" height="2rem" />
    </van-dialog>
  </div>
</template>

<script>
import http from '@/utils/http'
import { mapMutations } from 'vuex'
import Vue from 'vue'
import { Tag, Icon, Image, ImagePreview, Dialog } from 'vant'
Vue.use(Icon).use(Image).use(Tag).use(ImagePreview).use(Dialog)

export default {
  data () {
    return {
      fdlist: null,
      hidde: {
        height: '.6rem',
        overflow: 'hidden',
        marginTop: '.12rem',
        '-webkit-transition': 'height .5s ease',
        '-o-transition': 'height .5s ease',
        transition: 'height .5s ease'
      },
      tips: 'arrow-down',
      showDialog: false
    }
  },
  computed: {
    soondate () {
      const soon = new Date(this.fdlist.premiereAt * 1000)
      return soon.getFullYear() + '-' + (soon.getMonth() * 1 + 1) + '-' + soon.getDate()
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    developClicked () {
      if (this.tips === 'arrow-down') {
        this.tips = 'arrow-up'
        this.hidde = {
          height: '2.5rem',
          overflow: 'hidden',
          marginTop: '.12rem',
          '-webkit-transition': 'height .5s ease',
          '-o-transition': 'height .5s ease',
          transition: 'height .5s ease'
        }
      } else {
        this.tips = 'arrow-down'
        this.hidde = {
          height: '.6rem',
          overflow: 'hidden',
          marginTop: '.12rem',
          '-webkit-transition': 'height .5s ease',
          '-o-transition': 'height .5s ease',
          transition: 'height .5s ease'
        }
      }
    },
    iconbackClicked () {
      this.$router.back()
    },
    filmImgPreviewClicked (i) {
      ImagePreview({
        images: this.fdlist.photos,
        closeable: true,
        startPosition: i
      })
    },
    confirmDialog () {
      this.$router.push({ name: 'Home' })
    }
  },
  mounted () {
    this.FOOTERSHOW(false)

    // film详情是新请求的
    http
      .request({
        url: `/gateway?filmId=${this.$route.params.filmId}&k=64295`,
        headers: {
          'X-Host': 'mall.film-ticket.film.info'
        }
      })
      .then(res => {
        this.fdlist = res.data.data.film
        this.showDialog = !res.data.data.film.isSale
      })
  },
  destroyed () {
    this.FOOTERSHOW(true)
  }
}
</script>

<style lang="scss" scoped>
.film-details {
  .poster {
    position: relative;
    .back-icon {
      background-color: rgb(182, 177, 177);
      padding: .2rem;
      border-radius: 50%;
      position: absolute;
      left: .10rem;
      top: .10rem;
    }
  }
  .film-detail{
    margin-top: .10rem;
    padding: .10rem .15rem;
    box-sizing: border-box;
    background-color: #fff;
    .col {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      .film-name {
        text-align: left;
        width: 75vw;
        .name {
          color: #000;
          font-size: .3rem;
          height: .32rem;
          line-height: .32rem;
          margin-right: .7rem;
        }
      }
      .film-grade {
            width: 15vw;
            text-align: right;
            color: #ffb232;
        .grade {
            font-size: .3rem;
            font-style: italic;
        }
        .grade-text {
            font-size: .3rem;
        }
      }
    }
    .grey-text{
      text-align: left;
      font-size: .22rem;
      color: #797d82;
      margin-top: .04rem;
    }
  }
  .actors{
    margin-top: .10rem;
    background-color: #fff;
    .actors-title-bar {
      height: .8rem;
      line-height: .5rem;
      text-align: left;
      box-sizing: border-box;
      width: 100%;
      padding: .15rem;
    }
  }
  .photos {
    margin-top: .10rem;
    background-color: #fff;
    .photos-title-bar {
      height: .8rem;
      line-height: .5rem;
      width: 100%;
      box-sizing: border-box;
      padding: .15rem;
      span {
        display: inline-block;

        &.photos-title-text {
          float: left;
          color: #191a1b;
        }
        &.photos-to-all {
          font-size: .25rem;
          color: #797d82;
          float: right;
        }
      }
    }
  }
}
</style>
